<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>tooltipster插件使用-自定义提示框的外观</title>
        <link rel="stylesheet" href="css/tooltipster.bundle.css" />
    </head>
    <body>
        <span id="example" class="tooltip1" title="This is my span's tooltip message!">tooltip1</span>
        <span class="tooltip2" title="This is my span's tooltip message!">tooltip2</span>
        <button id="closeAllTooltips">关闭所有的提示框</button>
        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <script src="../fastclick/fastclick.js"></script>
        <script src="js/tooltipster.bundle.min.js"></script>
        <script>
        // Set default options for all future tooltip instantiations
        $.tooltipster.setDefaults({
            side: 'bottom',
            trigger:'click'
        });


        


        $('.tooltip1').tooltipster();
        $('.tooltip2').tooltipster();
        // this method call will only return an array with the instances created for the elements that matched '.tooltip2' because that's the latest initializing call.
        var instances = $.tooltipster.instancesLatest();
        // The `instances` method, when used without a second parameter, allows you to access all tooltips present in the page.
        // That may be useful to close all tooltips at once for example:
        $("#closeAllTooltips").click(function(){
            
            // var instances = $.tooltipster.instances();
            $.each(instances, function(i, instance){
                instance.close();
            });
        })
        </script>
    </body>
</html>